<template>
  <div class="hello">


    <div class="color-list">
      <div
        class="color-item"
        v-for="color in habitNameList" v-dragging="{ item: color, list: habitNameList, group: 'color' }"
        :key="color.text"
      >

        {{color.text}}  [{{timeBymil(color.valueSlider[0])}}-{{timeBymil(color.valueSlider[1])}}]
        <van-slider  v-model="color.valueSlider" max="1440" step="30" range @change="onChangeSlider(color.valueSlider)" active-color="#0ab9ee">

          <template #button>
            <div class="custom-button">||</div>
          </template>
        </van-slider>

      </div>
    </div>


  </div>
</template>

<script>
import {request} from "../network/request";






export default {
  name: 'HelloWorld',
  data () {
    return {
      show:true,
      rqdate:'',
      valueSlider:[10, 50],
      color:'color',
      msg: 'Welcome to Your Vue.js App',
      data:'',
      value:0,
      str:'',
      timeStart:'',
      habitNameList:[],

      updateList:[],


    }
  },


  created: function () {
    // `this` 指向 vm 实例  /habit/getHabitList
    console.log('a is: ' + this.a);
    this.getHabitList();
  },
  mounted () {


    this.$dragging.$on('dragged', ({ value }) => {
      console.log("value.item="+value.item);
      console.log("value.list="+value.list);
      // console.log(value.otherData)
      console.log("vupdateExecuteTime---start");

      this.updateList=[];
      value.list.map(item=>this.updateList.push({"executeTime":item.valueSlider,"id":item.id,"priority":item.index}));
      this.updateExecuteTime(this.updateList);
      console.log("vupdateExecuteTime---end");
    })
    this.$dragging.$on('dragend', () => {
      console.error();
    })
  },
  methods:{


    //根据分钟，计算几点到几点
    timeBymil(timeLong){
      const h= Math.floor(timeLong/60); // Math.floor()向下取整
      if(h%2==0){
        return h+":00";
      }else{
        return h+":30";
      }
    },
    //滑块
    onChangeSlider(value){
      console.log("滑块提示"+value);
    },

    webviewTimer(s) {
      let that=this;
      if(s===1){

        console.log("start");
        that.timeStart=  setInterval(function (){
        that.value=that.value+1;

        const s=that.value;
        const day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
        const hour = Math.floor((s - day * 24 * 3600) / 3600);
        const minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
        const second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
        if (hour) {
          that.str= hour + ":" + minute + ":" + second;
        } else {
          if (second < 10) {
            if (minute < 10) {
              if(second<10){
                that.str= "0" + minute + ":" +  "0" +second;
              }else{
                that.str= "0" + minute + ":" + second + "0";
              }
            } else {
              that.str= minute + ":" + second + "0";
            }
          } else {
            that.str= minute + ":" + second;
          }
        }
      },1000);
      }

      if(s===2){
        console.log("ddd");
        clearInterval(that.timeStart);
      }
    },

    formatDuring(mss) {
      let days = Math.floor(mss / (1000 * 60 * 60 * 24));
      let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);
      return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    },
    //获取每日任务，和卡片（同步，还是异步加载）
    getHabitList(){  //获取习惯列表
      request({
        url: '/habit/getHabitbyPriority',
        method:'post',
        data: { habitName: this.habitName},
      }).then(res => {
        console.log(res);
        res.data.map(item=>this.habitNameList.push({"valueSlider":item.executeTime,"text":item.habitName,"id":item.id}));

        console.log(this.habitNameList);
        // this.habitNameList=res.data;
      }).catch(err => {
        console.log(err);
      })
    },

    //修改优先级
    updateExecuteTime(updata){
      request({
        url: '/habit/updateExecuteTime',
        method:'post',
        data: updata,
      }).then(res => {
        console.log(res);

      }).catch(err => {
        console.log(err);
      })
    }




  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #0ab9ee;
  border-radius: 100px;
}
</style>
